<template>
  <div class="ts-warning">
    <ts-header :title="title" custom @onBack="$emit('onBack')"></ts-header>
    <div class="ts-status">
      <div class="top-icon">
        <img class="status-icon" :src="imgSrc"/>
      </div>
      <h1 class="back-head">{{msgTitle}}</h1>
      <p class="back-detail" :class="{'back-no-title':noTitle}">{{msgDetail}}</p>
      <div class="footer-btn" v-if="btnTxt" :class="{'footer-pending-btn':type!=='warning'}">
        <ts-button size="large" type="primary" @click="$emit('onBtnClick')">{{btnTxt}}</ts-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Status',
    props: {
      title: String,
      msgTitle: String,
      msgDetail: String,
      noTitle: Boolean,
      btnTxt: String,
      type: String
    },
    computed: {
      imgSrc() {
        let type = this.type || 'success';
        return require(`../../assets/imgs/widgets/${type}.png`)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  @import "../../assets/css/variables";

  .ts-warning {
    background-color: #fff;
    text-align: center;
    font-size: .28rem;
    color: #2E2E2E;
    padding-top: 0;
    flex: 1;
    .ts-status {
      margin-top: calc(50% - .30rem);
      .top-icon {
        .status-icon {
          width: 1.20rem;
        }
      }
      .back-head {
        font-size: .40rem;
        margin-top: .15rem;
      }
      .back-detail {
        color: #909090;
        margin-top: .15rem;
      }
      .back-no-title {
        color: #2E2E2E;
      }
    }

    .footer-btn {
      padding: 0 .35rem;
      position: absolute;
      bottom: .50rem;
      width: 100%;
    }

    .footer-pending-btn {
      padding: 0 1.88rem;
      position: static;
      margin-top: .80rem;
    }
  }
</style>
